import {  Modal } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import React, { useState,useRef,useEffect } from 'react';
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action"
const Form1 = (props) => {
    const myform  = useRef(null)
    const store = useSelector((state)=>{
       return { ...state.tablereducer}
    })
    const dispatch = useDispatch()
    useEffect(()=>{  // 回显数据
        if ( myform.current &&  Object.keys(props.editcont).length) {
            myform.current.setFieldsValue(props.editcont);
        } 
        
        if(myform.current &&  Object.keys(props.editcont).length === 0 )  {
            myform.current.resetFields()
           console.log(myform.current);
        }
       
    },[props.editcont])
    console.log(props);
    const onFinish = (values) => {
        console.log('Success:', values);
        if (props.isEdit === "新增") {
          dispatch(action.addfn(values))
        }else {
            dispatch(action.editfn(Object.assign({},values,{index:props.index})))
        }
       
        setTimeout(()=>{
            props.fn(false)
        },500)

    };
    
    

    const showModal = () => {
       
    };

  

    const handleCancel = () => {
        props.fn(false)
    };

    return (
        <>
            <Modal title={props.isEdit} visible={props.editisshow} onCancel={handleCancel} footer={null}>
                <Form
                    name="basic"
                    ref={myform}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                     
                    autoComplete="off"
                >
                    <Form.Item
                        label="name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="date"
                        name="date"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="address"
                        name="address"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default Form1;